<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<!-- <script src="https://cdn.bootcss.com/vue/2.5.8/vue.js"></script> -->
<script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.js'></script>
<div id="root">
	{{dataObj.info.name}}-{{dataObj.info.age}},<br/>
	{{dataObj.person.name}}-{{dataObj.person.age}}
</div>
<script>
	/**
	 * 通过$set方法可以将添加一个具备响应式特性的属性，并且其子属性也
	 * 具备响应式特性，但是必须是新属性才可以，如果是本身已有的属性该
	 * 方法是不起作用的。
	 */
	new Vue({
      el: '#root',
      data: {
        dataObj: {}
      },
      ready: function () {
        var self = this;
 
        /**
         * 异步请求模拟
         */
        setTimeout(function () {
          var data = {
            name: 'xiaofu',
            age: 18
          };
          var data01 = {
            name: 'yangxiaofu',
            age: 19
          };
          self.dataObj['person'] = {};
          self.$set('dataObj.info', data);
          self.$set('dataObj.person', data01); 
        }, 3000);
      }
    })
</script>	
</body>
</html>